import axios from "axios";
import L from "leaflet";
import { ElMessage } from "element-plus";
import "element-plus/theme-chalk/el-message.css";
import personalData from "./data"
import pinia from "@/store/pinia";
import { useMapStore } from "@/store/map";
const mapStore = useMapStore(pinia);

const getPersonnelList = async (obj) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(personalData);
    }, 1000);
  });
};

const getAjaxPersonnelTableData = (obj) => {
  getPersonnelList(obj).then((res) => {
    let tableString =
      '<table class="custom-table"><thead><tr><th width="160">姓名+身份证+照片</th><th>拍摄位置</th><th width="150">拍摄时间</th><th width="100">经度</th><th width="100">纬度</th></tr></thead><tbody>';

    for (let n = 0; n < res["personTrack"].length; n++) {
      const personName = res["personTrack"][n]["personName"];
      const personNumber = res["personTrack"][n]["personNumber"];
      let personImageUrl = res["personTrack"][n]["personImageUrl"];
      if (!personImageUrl) {
        personImageUrl = "";
      } else {
        personImageUrl = `<a href="${personImageUrl}" target='_blank'>查看照片</a>`;
      }

      mapStore.trajectoryNameList.push({
        value: personName,
        label: personName,
      });

      for (let m = 0; m < res["personTrack"][n]["trackList"].length; m++) {
        let matchLongitude =
          res["personTrack"][n]["trackList"][m]["matchLongitude"];
        matchLongitude = matchLongitude ? matchLongitude : "";
        let matchLatitude =
          res["personTrack"][n]["trackList"][m]["matchLatitude"];
        matchLatitude = matchLatitude ? matchLatitude : "";
        let matchShotTime =
          res["personTrack"][n]["trackList"][m]["matchShotTime"];
        matchShotTime = matchShotTime ? matchShotTime : "";
        let matchDevicePosition =
          res["personTrack"][n]["trackList"][m]["matchDevicePosition"];
        matchDevicePosition = matchDevicePosition ? matchDevicePosition : "";

        if (res["personTrack"][n]["trackList"].length === 0) {
          tableString += `<tr>
            <td rowspan="${res["personTrack"][n]["trackList"].length}" data='{%personName%: %${personName}%}' align="center">${personName}<br/>${personNumber}<br/>${personImageUrl}</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            </tr>
            `;
        } else {
          if (m === 0) {
            tableString += `<tr title='${personName}'>
                <td rowspan="${res["personTrack"][n]["trackList"].length}" data='{%personName%: %${personName}%}' align="center">${personName}<br/>${personNumber}<br/>${personImageUrl}</td>
                <td data='{%personName%: %${personName}%, %lon%: %${matchLongitude}%, %lat%: %${matchLatitude}%, %matchShotTime%: %${matchShotTime}%, %matchDevicePosition%: %${matchDevicePosition}%}'>${matchDevicePosition}</td>
                <td data='{%personName%: %${personName}%, %lon%: %${matchLongitude}%, %lat%: %${matchLatitude}%, %matchShotTime%: %${matchShotTime}%, %matchDevicePosition%: %${matchDevicePosition}%}'>${matchShotTime}</td>
                <td data='{%personName%: %${personName}%, %lon%: %${matchLongitude}%, %lat%: %${matchLatitude}%, %matchShotTime%: %${matchShotTime}%, %matchDevicePosition%: %${matchDevicePosition}%}'>${matchLongitude}</td>
                <td data='{%personName%: %${personName}%, %lon%: %${matchLongitude}%, %lat%: %${matchLatitude}%, %matchShotTime%: %${matchShotTime}%, %matchDevicePosition%: %${matchDevicePosition}%}'>${matchLatitude}</td>
                </tr>
                `;
          } else {
            tableString += `
                <tr title='${personName}'>
                <td data='{%personName%: %${personName}%, %lon%: %${matchLongitude}%, %lat%: %${matchLatitude}%, %matchShotTime%: %${matchShotTime}%, %matchDevicePosition%: %${matchDevicePosition}%}'>${matchDevicePosition}</td>
                <td data='{%personName%: %${personName}%, %lon%: %${matchLongitude}%, %lat%: %${matchLatitude}%, %matchShotTime%: %${matchShotTime}%, %matchDevicePosition%: %${matchDevicePosition}%}'>${matchShotTime}</td>
                <td data='{%personName%: %${personName}%, %lon%: %${matchLongitude}%, %lat%: %${matchLatitude}%, %matchShotTime%: %${matchShotTime}%, %matchDevicePosition%: %${matchDevicePosition}%}'>${matchLongitude}</td>
                <td data='{%personName%: %${personName}%, %lon%: %${matchLongitude}%, %lat%: %${matchLatitude}%, %matchShotTime%: %${matchShotTime}%, %matchDevicePosition%: %${matchDevicePosition}%}'>${matchLatitude}</td>
                </tr>
                `;
          }
        }
      }
    }

    tableString += "</tbody></table>";
    mapStore.trajectoryDetailsTable = tableString;

    console.log("tableString:");
    console.log(tableString);

    mapStore.loading = false;
  });
};

export { getPersonnelList, getAjaxPersonnelTableData };
